<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">
        <Collapse value="0">
          <Panel>
            外层刻度尺
            <div slot="content">
              <Form :label-width="100">
                <FormItem label="半径">
                  <Input size="small" v-model="chartOption.outsideGauge.radius" placeholder=""/>
                </FormItem>
                <FormItem label="最小刻度">
                  <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.outsideGauge.min"></InputNumber>
                </FormItem>
                <FormItem label="最大刻度">
                  <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.outsideGauge.max"></InputNumber>
                </FormItem>

                <FormItemPanel title="刻度标签">
                  <FormItem label="显示">
                    <i-switch v-model="chartOption.outsideGauge.axisLabel.show">
                      <span slot="open"></span>
                      <span slot="close"></span>
                    </i-switch>
                  </FormItem>
                  <FormItem label="字体颜色">
                    <PnColorPicker size="small" v-model="chartOption.outsideGauge.axisLabel.color" alpha recommend/>
                  </FormItem>
                  <FormItem label="与刻度尺间距">
                    <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.outsideGauge.axisLabel.distance"></InputNumber>
                  </FormItem>
                </FormItemPanel>

                <FormItemPanel title="刻度样式">
                  <FormItem label="显示">
                    <i-switch v-model="chartOption.outsideGauge.axisTick.show">
                      <span slot="open"></span>
                      <span slot="close"></span>
                    </i-switch>
                  </FormItem>
                  <FormItem label="颜色">
                    <PnColorPicker size="small" v-model="chartOption.outsideGauge.axisTick.lineStyle.color" alpha recommend/>
                  </FormItem>
                </FormItemPanel>

                <FormItemPanel title="分隔线样式">
                  <FormItem label="显示">
                    <i-switch v-model="chartOption.outsideGauge.splitLine.show">
                      <span slot="open"></span>
                      <span slot="close"></span>
                    </i-switch>
                  </FormItem>
                  <FormItem label="颜色">
                    <PnColorPicker size="small" v-model="chartOption.outsideGauge.splitLine.lineStyle.color" alpha recommend/>
                  </FormItem>
                </FormItemPanel>
              </Form>
            </div>
          </Panel>

          <Panel>
            内层进度条
            <div slot="content">
              <Form :label-width="100">
                <FormItem label="半径">
                  <Input size="small" v-model="chartOption.insideGauge.radius" placeholder=""/>
                </FormItem>

                <FormItemPanel title="中心坐标">
                  <FormItem label="横坐标">
                    <Input size="small" v-model="chartOption.insideGauge.center[0]" placeholder=""/>
                  </FormItem>
                  <FormItem label="纵坐标">
                    <Input size="small" v-model="chartOption.insideGauge.center[1]" placeholder=""/>
                  </FormItem>
                </FormItemPanel>

                <FormItemPanel title="进度条配色">
                  <FormItem label="起始颜色">
                    <PnColorPicker size="small" v-model="chartOption.insideGauge.color.startColor" alpha recommend/>
                  </FormItem>
                  <FormItem label="结束颜色">
                    <PnColorPicker size="small" v-model="chartOption.insideGauge.color.endColor" alpha recommend/>
                  </FormItem>
                  <FormItem label="底色">
                    <PnColorPicker size="small" v-model="chartOption.insideGauge.color.innerStrokeColor" alpha recommend/>
                  </FormItem>
                </FormItemPanel>

                <FormItemPanel title="类目标签">
                  <FormItem label="显示">
                    <i-switch v-model="chartOption.insideGauge.title.show">
                      <span slot="open"></span>
                      <span slot="close"></span>
                    </i-switch>
                  </FormItem>
                  <FormItem label="水平偏移">
                    <Input size="small" v-model="chartOption.insideGauge.title.offsetCenter[0]" placeholder=""/>
                  </FormItem>
                  <FormItem label="垂直偏移">
                    <Input size="small" v-model="chartOption.insideGauge.title.offsetCenter[1]" placeholder=""/>
                  </FormItem>
                  <FormItem label="字体颜色">
                    <PnColorPicker size="small" v-model="chartOption.insideGauge.title.textStyle.color" alpha recommend/>
                  </FormItem>
                  <FormItem label="字体大小">
                    <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.insideGauge.title.textStyle.fontSize"></InputNumber> px
                  </FormItem>
                </FormItemPanel>

                <FormItemPanel title="值标签">
                  <FormItem label="显示">
                    <i-switch v-model="chartOption.insideGauge.detail.show">
                      <span slot="open"></span>
                      <span slot="close"></span>
                    </i-switch>
                  </FormItem>
                  <FormItem label="横向偏移">
                    <Input size="small" v-model="chartOption.insideGauge.detail.offsetCenter[0]" placeholder=""/>
                  </FormItem>
                  <FormItem label="纵向偏移">
                    <Input size="small" v-model="chartOption.insideGauge.detail.offsetCenter[1]" placeholder=""/>
                  </FormItem>
                  <FormItem label="后缀文本">
                    <Input size="small" v-model="chartOption.insideGauge.detail.suffixText" placeholder=""/>
                  </FormItem>
                  <FormItem label="字体颜色">
                    <PnColorPicker size="small" v-model="chartOption.insideGauge.detail.textStyle.color" alpha recommend/>
                  </FormItem>
                  <FormItem label="字体大小">
                    <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.insideGauge.detail.textStyle.fontSize"></InputNumber> px
                  </FormItem>

                </FormItemPanel>
              </Form>
            </div>
          </Panel>
          <Panel v-if="chartOption.title">
            标题
            <ShowToggle class="float-right" v-model="chartOption.title.show"></ShowToggle>
            <div slot="content">
              <EchartsTitleConfigForm v-model="chartOption.title"></EchartsTitleConfigForm>
            </div>
          </Panel>
          <Panel>
            其他
            <div slot="content">
              <EchartsOtherConfigForm v-model="compConfigData"></EchartsOtherConfigForm>
            </div>
          </Panel>
        </Collapse>
      </TabPane>
      <TabPane name="extend_tab" tab="main_tabs" label="扩展配置">
        <Container v-if="mainTabsValue == 'extend_tab'">
          <CustomOptionDocument :componentId="id"></CustomOptionDocument>
          <CodeEditor v-model="customOption" mode="json"></CodeEditor>
          <EchartsSpreadingCodeForm v-model="echartsSpreadingCode"></EchartsSpreadingCodeForm>
        </Container>
      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="PercentGaugeChart"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <InteractionReceive></InteractionReceive>
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'PercentGaugeChartForm',
    mixins: [FuncCompFormMixin],
    data() {
      return {

      }
    },
    mounted() {

    },
    methods: {

    },
    computed: {
      ...mapFields({

        chartOption: 'component.compConfigData.chartOption'

      })
    }
  }
</script>

<style scoped>

</style>
